<template>
    <div class="c-choose">
        <div class="choose-header">
            选择你的答题模式
        </div>
        <div class="choose-btn">
            <button class="vp-btn vp-btn-red" type="button" @click="locationHref('2')">练习模式</button>
            <button class="vp-btn vp-btn-red" type="button" @click="locationHref('1')">测试模式</button>
        </div>
        <div class="choose-text">
            <div>
                练习模式，可以多次重复练习，分数100分，时间45分钟
            </div>
            <div>
                题型组合为40选择题，40道判断，20道填空，时间结束的时候自动提交，请点击下面开始按钮答题，祝您答题愉快。
            </div>
            <div>
                答题期间请不要刷新或者离开页面或者返回上一页，防止出现错误！感谢您的配合！
            </div>
        </div>
        <!--<div class="choose-button">-->
            <!--<button class="vp-btn vp-btn-red" type="button">确定</button>-->
        <!--</div>-->
    </div>
</template>

<script>

    export default {
        name:'choose',

        data() {
            return {

            }
        },

        methods: {
            locationHref(type) {
                if (type == 1) {
                    if (localStorage.slug_id) {
                        this.axios.get('get_count',{ params: {id: localStorage.slug_id} })
                            .then(data => {
                                if (data.status == 200) {
                                    this.$store.dispatch('changeStatus',1).then(() => {
                                        this.$router.push(`/topic/main?type=${type}`);
                                    });
                                } else {
                                    this.$message.error('您的答题次数已用完，谢谢参与！');
                                }
                            })
                    } else {
                        this.$message.error('未检测到您的用户信息,请返回首页点击答题进行登陆！');
                        this.$router.push('/home/first');
                    }
                } else {
                    this.$store.dispatch('changeStatus',1).then(() => {
                        this.$router.push(`/topic/main?type=${type}`);
                    });
                }
            }
        },

        mounted() {
            this.$store.dispatch('changeStatus',0)
        },

        components:{

        },
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";
    @bred:#B12828;
    .c-choose {
        text-align: center;
        width: 50%;
        margin: 30px auto;
        .choose-header{
            font-size:18px;
            font-weight:bold;
        }
        .choose-btn {
            margin: 30px 0;
            .flex-between;
            .vp-btn {
                background: transparent;
                width: 40%;
                font-size:18px;
                font-weight:bold;
                border-radius:0;
                padding: 15px 20px;
            }
            :first-child {
                color: @bred;
            }
            :last-child {
                color:#3B3B3B;
                border:1px solid #3b3b3b;
            }
        }
        .choose-text{
            text-align: left;
            line-height:28px;
            margin:20px 0 30px 0;
            :last-child {
                font-size:18px;
                font-weight:bold;
                color: @bred;
            }
        }
        .choose-button {
            .vp-btn {
                padding: 15px 50px;
                font-size:18px;
            }
        }
    }
    @media screen and (max-width: 768px) {
        .c-choose {
            font-size:2vw;
            text-align: center;
            width: 90%;
            margin: 30px auto;
            .choose-header{
                font-size:2vw;
                font-weight:bold;
            }
            .choose-btn {
                margin: 30px 0;
                .flex-between;
                .vp-btn {
                    background: transparent;
                    width: 40%;
                    font-size:2vw;
                    font-weight:bold;
                    border-radius:0;
                    padding: 2vw 6vw;
                }
                :first-child {
                    color: @bred;
                }
                :last-child {
                    color:#3B3B3B;
                    border:1px solid #3b3b3b;
                }
            }
            .choose-text{
                text-align: left;
                line-height:18px;
                margin:2vw 0 5vw 0;
                :last-child {
                    font-size:2vw;
                    font-weight:bold;
                    color: @bred;
                }
            }
            .choose-button {
                .vp-btn {
                    padding: 2vw 6vw;
                    font-size:2vw;
                }
            }
        }
    }
</style>